<template>
	<div class="app-container" v-loading="loading">
		<div class="ledger_grid_wrapper">
			<el-card shadow="never" header="涉密人员数量">
				<svg-icon icon-class="people-number" />
				<h4>{{ peopleCount }}</h4>
				个
			</el-card>
			<template v-for="(item, index) in ledgerData">
				<el-card shadow="never" :header="`${item.title}数量`">
					<svg-icon icon-class="people-number" />
					<h4>{{ item.total }}</h4>
					个
				</el-card>
			</template>
		</div>
		<div class="index_center_chart" ref="resDataChart"></div>
		<div class="index_bottom_chart">
			<el-card shadow="never">
				<div class="chart" ref="pieChart"></div>
			</el-card>
			<el-card shadow="never">
				<div class="chart" ref="pieChart1"></div>
			</el-card>
			<el-card shadow="never">
				<div class="chart" ref="pieChart2"></div>
			</el-card>
		</div>
		<!-- <template v-for="item in ledgerData">
			<ledger-table :title="`${item.title}台账`" :type="item.type" :data="item.list" :dicts="dict.type"></ledger-table>
		</template> -->
	</div>
</template>

<script>
import * as echarts from 'echarts';
import ledgerTable from './ledgerTable';
import eleResize from 'element-resize-detector';
import { listUser } from '@/api/personnal/person';
import { recheckData, leaveData, subsidyData, makeupData } from '@/api/ledger/index';
export default {
	components: { ledgerTable },
	dicts: ['sys_user_sex', 'sp_highest_degree', 'sp_level', 'sp_people_type'],
	data() {
		const pageViewColor = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: '#166AC2' },
			{ offset: 1, color: '#15D2A5' }
		]);
		const downloadColor = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: '#B72525' },
			{ offset: 1, color: '#FBAB33' }
		]);
		return {
			loading: false,
			peopleCount: 0,
			ledgerData: [],
			ledgerType: ['recheck', 'leave', 'subsidy', 'makeup'],
			swchart: null,
			chartOption: {
				title: { text: '时段访问数据', top: 0, left: 0, padding: [8, 0], textStyle: { fontSize: 16, lineHeight: 16 } },
				legend: {
					top: 0,
					left: 100,
					padding: 8,
					icon: 'rect',
					itemHeight: 4,
					itemWidth: 40,
					data: [
						{ name: '访问量', itemStyle: { color: pageViewColor } },
						{ name: '下载量', itemStyle: { color: downloadColor } }
					]
				},
				grid: { top: 48, left: 0, right: 16, bottom: 16, containLabel: true },
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
							formatter: (params) => {
								if (params.axisDimension === 'x') {
									return params.value;
									/* if (params.value.includes(':')) {
										return params.value;
									} else if (params.value.includes('-')) {
										let vals = params.value.split('-');
										return `${vals[0]}\n${vals[1]}-${vals[2]}`;
									} */
								} else if (params.axisDimension === 'y') {
									return parseInt(params.value * 1000) / 1000;
								}
							}
						}
					}
				},
				xAxis: {
					name: '时间',
					nameGap: 0,
					nameRotate: 270,
					nameTextStyle: { align: 'right', color: '#909399' },
					type: 'category',
					splitLine: { show: true, lineStyle: { color: '#E6EBF0' } },
					axisLabel: {
						color: '#8D9094',
						formatter(value, index) {
							return value;
							/* console.log(value);
							if (value.includes(':')) {
								return value;
							} else if (value.includes('-')) {
								let vals = value.split('-');
								return `${vals[0]}\n${vals[1]}-${vals[2]}`;
							} */
						}
					},
					axisTick: false,
					axisLine: { lineStyle: { color: '#E6EBF0' } },
					boundaryGap: false,
					data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
				},
				yAxis: {
					name: '数量',
					nameGap: 0,
					nameTextStyle: { align: 'left', color: '#909399' },
					type: 'value',
					axisLabel: { color: '#8D9094' },
					axisLine: { lineStyle: { type: 'dotted', color: '#E6EBF0' } },
					splitLine: { lineStyle: { type: 'dotted', color: '#E6EBF0' } }
				},
				series: [
					{
						name: '访问量',
						type: 'line',
						smooth: true,
						showSymbol: false,
						itemStyle: { normal: { lineStyle: { type: 'solid', color: pageViewColor } } },
						areaStyle: { opacity: 0.1, color: pageViewColor },
						data: [12, 54, 87, 96, 25, 65, 34, 85, 94, 62, 31, 85]
					},
					{
						name: '下载量',
						type: 'line',
						smooth: true,
						showSymbol: false,
						itemStyle: { normal: { lineStyle: { type: 'solid', color: downloadColor } } },
						areaStyle: { opacity: 0.1, color: downloadColor },
						data: [54, 87, 96, 25, 65, 34, 85, 94, 62, 31, 85, 115]
					}
				]
			},
			pieOption: {
				tooltip: { trigger: 'item' },
				series: {
					name: 'Access From',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					padAngle: 5,
					itemStyle: { borderRadius: 10 },
					label: { show: false, position: 'center' },
					emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
					labelLine: { show: false },
					data: [
						{ value: 1048, name: 'Search Engine' },
						{ value: 735, name: 'Direct' },
						{ value: 580, name: 'Email' },
						{ value: 484, name: 'Union Ads' },
						{ value: 300, name: 'Video Ads' }
					]
				}
			}
		};
	},
	mounted() {
		this.loading = true;
		this.initPageRequest();
		this.initializeEcharts();
		this.initializePieEcharts();
		this.initializePieEcharts1();
		this.initializePieEcharts2();
	},
	methods: {
		//页面初始化
		async initPageRequest() {
			let promiArr = this.ledgerType.map((n) => this.getLedgerDataByType(n));
			this.ledgerData = await Promise.all(promiArr);
			this.peopleCount = await this.getPeopleData();
			this.loading = false;
		},

		//初始化图表
		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.resDataChart);
			eleResize().listenTo(this.$refs.resDataChart, (ele) => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
			this.swchart.setOption(this.chartOption, true);
		},
		
		//初始化饼图
		initializePieEcharts() {
			let swchart = echarts.init(this.$refs.pieChart);
			eleResize().listenTo(this.$refs.pieChart, (ele) => {
				this.$nextTick(() => {
					swchart.resize();
				});
			});
			swchart.setOption(this.pieOption, true);
		},
		
		//初始化饼图
		initializePieEcharts1() {
			let swchart = echarts.init(this.$refs.pieChart1);
			eleResize().listenTo(this.$refs.pieChart1, (ele) => {
				this.$nextTick(() => {
					swchart.resize();
				});
			});
			swchart.setOption(this.pieOption, true);
		},
		
		//初始化饼图
		initializePieEcharts2() {
			let swchart = echarts.init(this.$refs.pieChart2);
			eleResize().listenTo(this.$refs.pieChart2, (ele) => {
				this.$nextTick(() => {
					swchart.resize();
				});
			});
			swchart.setOption(this.pieOption, true);
		},

		//获取涉密人员数据
		async getPeopleData() {
			let params = { pageNum: 1, pageSize: 1 };
			let result = await listUser(params);
			if (result.code === 200) {
				return Promise.resolve(result.total);
			}
		},

		async getLedgerDataByType(type) {
			let params = { pageNum: 1, pageSize: 5 };
			let title = (() => {
				if (type === 'recheck') {
					return '复审人员';
				} else if (type === 'leave') {
					return '因私出国';
				} else if (type === 'subsidy') {
					return '人事补贴';
				} else if (type === 'makeup') {
					return '脱密人员';
				}
			})();
			try {
				let result = null;
				if (type === 'recheck') {
					result = await recheckData(params);
				} else if (type === 'leave') {
					result = await leaveData(params);
				} else if (type === 'subsidy') {
					result = await subsidyData(params);
				} else if (type === 'makeup') {
					result = await makeupData(params);
				}
				if (result.code === 200) {
					let total = result.total;
					let list = result.rows || [];
					return Promise.resolve({ title, type, total, list });
				}
			} catch (e) {
				return Promise.resolve({ title, type, total, list: [] });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	min-height: calc(100vh - 84px);
	overflow: auto;
}
.ledger_grid_wrapper::v-deep {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20px;
	height: 106px;
	margin-bottom: 20px;
	.el-card__header {
		font-size: 16px;
		line-height: 1;
		padding: 16px 16px 0;
		border-bottom: none;
	}
	.el-card__body {
		display: flex;
		align-items: center;
		padding: 16px;
	}
	svg.svg-icon {
		width: 32px;
		height: 32px;
		fill: #dcdfe6;
	}
	h4 {
		font-size: 24px;
		margin: 0 6px 0 16px;
	}
}
.index_center_chart {
	height: 450px;
	margin-right: -14px;
}
.index_bottom_chart::v-deep {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	height: 253px;
	.el-card__body {
		height: 100%;
		padding: 0;
	}
	.chart {
		width: 100%;
		height: 100%;
	}
}
</style>
